import { isFunction, getSystemInfo } from "../../utils/util.js";
import { Component, useState } from "react";
import Taro from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import { useSelector, useDispatch } from 'react-redux'

import './index.less'
let globalSystemInfo = getSystemInfo();

export default function HooksPage(props) {

    setStyle(systemInfo) {
        const {
            statusBarHeight,
            navBarHeight,
            capsulePosition,
            navBarExtendHeight,
            ios,
            windowWidth
        } = systemInfo;
        const { back, home, title, color } = props;
        let rightDistance = windowWidth - capsulePosition.right; //胶囊按钮右侧到屏幕右侧的边距
        let leftWidth = windowWidth - capsulePosition.left; //胶囊按钮左侧到屏幕右侧的边距

        let navigationbarinnerStyle = [
            `color:${color}`,
            //`background:${background}`,
            `height:${navBarHeight + navBarExtendHeight}px`,
            `padding-top:${statusBarHeight}px`,
            `padding-right:${leftWidth}px`,
            `padding-bottom:${navBarExtendHeight}px`
        ].join(";");
        let navBarLeft = [];
        if ((back && !home) || (!back && home)) {
            navBarLeft = [
                `width:${capsulePosition.width}px`,
                `height:${capsulePosition.height}px`,
                `margin-left:0px`,
                `margin-right:${rightDistance}px`
            ].join(";");
        } else if ((back && home) || title) {
            navBarLeft = [
                `width:${capsulePosition.width}px`,
                `height:${capsulePosition.height}px`,
                `margin-left:${rightDistance}px`
            ].join(";");
        } else {
            navBarLeft = [`width:auto`, `margin-left:0px`].join(";");
        }
        return {
            navigationbarinnerStyle,
            navBarLeft,
            navBarHeight,
            capsulePosition,
            navBarExtendHeight,
            ios,
            rightDistance
        };
    }
    const [configStyle, setConfigStyle] = useState(setStyle(globalSystemInfo))
    const options = {
        multipleSlots: true,
        addGlobalClass: true
    };
    const title = useSelector(state => state.users.title)
    const dispatch = useDispatch();
    const cs = (vlaues) => {
        dispatch({
            type: `users/synTitle`,
            payload: vlaues
        })
    }
    return (
        <View>
        </View>
    );
}


